<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="utf-8">
		<title>video</title>
		<style>
			* {
				box-sizing: border-box;
			}
			
			video {
				width: 100%;
				height: auto;
			}
			
			.row:after {
				content: "";
				clear: both;
				display: block;
			}
			
			[class*="col-"] {
				float: left;
				padding: 15px;
				width: 100%;
			}
			
			@media only screen and (min-width: 600px) {
				.col-s-12 {
					width: 8.33%;
				}
				.col-s-2 {
					width: 16.66%;
				}
				.col-s-3 {
					width: 25%;
				}
				.col-s-4 {
					width: 33.33%;
				}
				.col-s-5 {
					width: 41.66%;
				}
				.col-s-6 {
					width: 50%;
				}
				.col-s-7 {
					width: 58.33%;
				}
				.col-s-8 {
					width: 66.66%;
				}
				.col-s-9 {
					width: 75%;
				}
				.col-s-10 {
					width: 83.33%;
				}
				.col-s-11 {
					width: 91.66%;
				}
				.col-s-12 {
					width: 100%;
				}
			}
			
			@media only screen and (min-width: 768px) {
				.col-1 {
					width: 8.33%;
				}
				.col-2 {
					width: 16.66%;
				}
				.col-3 {
					width: 25%;
				}
				.col-4 {
					width: 33.33%;
				}
				.col-5 {
					width: 41.66%;
				}
				.col-6 {
					width: 50%;
				}
				.col-7 {
					width: 58.33%;
				}
				.col-8 {
					width: 66.66%;
				}
				.col-9 {
					width: 75%;
				}
				.col-10 {
					width: 83.33%;
				}
				.col-11 {
					width: 91.66%;
				}
				.col-12 {
					width: 100%;
				}
			}
			
			html {
				font-family: "Lucida Sans", sans-serif;
			}
			
			.header {
				background-color: #9933cc;
				color: #ffffff;
				padding: 15px;
			}
			
			.menu ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			
			.menu li {
				padding: 8px;
				margin-bottom: 7px;
				background-color: #33b5e5;
				color: #ffffff;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
			}
			
			.menu li:hover {
				background-color: #0099cc;
			}
			
			.aside {
				background-color: #33b5e5;
				padding: 15px;
				color: #ffffff;
				text-align: center;
				font-size: 14px;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
			}
			
			.footer {
				background-color: #0099cc;
				color: #ffffff;
				text-align: center;
				font-size: 12px;
				padding: 15px;
			}
		</style>
	</head>

	<body>

		<div class="header">
			<h1>奇奇怪怪电影网</h1>
		</div>

		<div class="row">

			<div class="col-3 col-s-3 menu">
				<ul>
					<li>电影介绍</li>
					<li>电影推荐</li>
					<li>更多电影</li>
					<li>主页</li>
				</ul>
			</div>

			<div class="col-6 col-s-9">
				<h1>The City</h1>
				<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
				<video src="img/myVideo.mp4" width="400" controls>
					<source src="mov_bbb.mp4" type="video/mpeg">
					<source src="mov_bbb.ogg" type="video/mpeg"> Your browser does not support HTML5 video.
				</video>
			</div>

			<div class="col-3 col-s-12">
				<div class="aside">
					<h2>欢迎来到</h2>
					<p>动物世界</p>
					<h2>Where?</h2>
					<p>Crete is a Greek island in the Mediterranean Sea.</p>
					<h2>How?</h2>
					<p>You can reach Chania airport from all over Europe.</p>
				</div>
			</div>

		</div>

		<div class="footer">
			<p>一个奇奇怪怪的电影主页</p>
		</div>

	</body>

</html>